<div ng-controller="StateResponses">
  <div style="font-size: 16px; margin-top: 35px;">
    <strong>Learner's Answers and Oppia's Responses</strong>
  </div>

  <md-card class="oppia-editor-card-with-avatar">
    <div class="oppia-editor-card-body">
      <div ng-if="answerGroups.length > 0">
        <ul class="nav nav-stacked nav-pills" role="tablist" ui-sortable="ANSWER_GROUP_LIST_SORTABLE_OPTIONS" ng-model="answerGroups">
          <!-- An HTML element marked ui-sortable should contain only one element,
          and this element should have an ng-repeat defined on it. See the
          ui-sortable documentation for more details. -->
          <!-- Note that adding "track by $index" here seems to mess up the final
          index in the stop() event handler. -->
          <li ng-repeat="answerGroup in answerGroups" ng-class="{'active': activeAnswerGroupIndex === $index}" class="oppia-rule-block oppia-sortable-rule-block" style="margin-top: 0;">
            <span class="oppia-rule-sort-handle" ng-if="answerGroups.length > 1">
              <img ng-if="editabilityService.isEditable()" src="/images/general/drag_dots.png" width="10">
            </span>
            <a ng-click="changeActiveAnswerGroupIndex($index)" class="oppia-rule-tab protractor-test-response-tab" ng-class="{'oppia-rule-tab-active': activeAnswerGroupIndex === $index}">
              <div class="oppia-response-header-block">
                <div class="oppia-response-header">
                  <span ng-if="$index != activeAnswerGroupIndex" ng-attr-title="<[answerGroup | summarizeAnswerGroup:getCurrentInteractionId():getAnswerChoices():false]>">
                    <[answerGroup | summarizeAnswerGroup:getCurrentInteractionId():getAnswerChoices():true]>
                  </span>
                  <span ng-if="$index == activeAnswerGroupIndex">&nbsp;</span>
                </div>
                <span>→</span>
                <span ng-if="!isOutcomeLooping(answerGroup.outcome) && !isCreatingNewState(answerGroup.outcome)" ng-click="navigateToState(answerGroup.outcome.dest)" class="oppia-nested-link">
                  <[answerGroup.outcome.dest]>
                </span>
                <span ng-if="!isOutcomeLooping(answerGroup.outcome) && isCreatingNewState(answerGroup.outcome)">
                  <em ng-if="answerGroup.outcome.newStateName">(<[answerGroup.outcome.newStateName]>)</em>
                  <em ng-if="!answerGroup.outcome.newStateName">Nowhere yet...</em>
                </span>
                <span ng-if="isOutcomeLooping(answerGroup.outcome)">
                  <em>(try again)</em>
                </span>
              </div>
              <img src="/third_party/static/material-design-icons-1.0.1/ic_close_black_48dp.png" ng-if="editabilityService.isEditable()" class="protractor-test-delete-response oppia-delete-response-button oppia-transition-200" ng-click="deleteAnswerGroup($index, $event)">
            </a>

            <div ng-if="activeAnswerGroupIndex === $index">
              <div class="oppia-editor-card-section">
                <div class="oppia-rule-body-container protractor-test-response-body-<[$index]>">
                  <answer-group-editor rules="answerGroup.rule_specs" outcome="answerGroup.outcome" on-save-answer-group-feedback="saveActiveAnswerGroupFeedback(answerGroup.outcome)" on-save-answer-group-dest="saveActiveAnswerGroupDest(answerGroup.outcome)" on-save-answer-group-rules="saveActiveAnswerGroupRules(answerGroup.rule_specs)" is-editable="editabilityService.isEditable()" class="protractor-test-response-body">
                  </answer-group-editor>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div>
        <ul class="nav nav-stacked nav-pills" role="tablist">
          <li ng-class="{'active': activeAnswerGroupIndex === answerGroups.length}" class="oppia-rule-block">
            <a ng-click="changeActiveAnswerGroupIndex(answerGroups.length)" class="oppia-rule-tab oppia-default-rule-tab protractor-test-default-response-tab" ng-class="{'oppia-rule-tab-active': activeAnswerGroupIndex == answerGroups.length}">
              <div class="oppia-response-header-block">
                <div ng-attr-title="<[defaultOutcome | summarizeDefaultOutcome:getCurrentInteractionId():answerGroups.length:false]>" class="oppia-response-header">
                  <[defaultOutcome | summarizeDefaultOutcome:getCurrentInteractionId():answerGroups.length:true]>
                </div>
                <span>→</span>
                <span ng-if="!isOutcomeLooping(defaultOutcome) && !isCreatingNewState(defaultOutcome)" ng-click="navigateToState(defaultOutcome.dest)" class="oppia-nested-link">
                  <[defaultOutcome.dest]>
                </span>
                <span ng-if="!isOutcomeLooping(defaultOutcome) && isCreatingNewState(defaultOutcome)">
                  <em ng-if="defaultOutcome.newStateName">(<[defaultOutcome.newStateName]>)</em>
                  <em ng-if="!defaultOutcome.newStateName">Nowhere yet...</em>
                </span>
                <span ng-if="isOutcomeLooping(defaultOutcome)">
                  <em>(try again)</em>
                </span>
              </div>
            </a>

            <div ng-if="activeAnswerGroupIndex === answerGroups.length">
              <div class="oppia-editor-card-section">
                <div class="oppia-rule-body-container protractor-test-response-body-default">
                  <answer-group-editor rules="null" outcome="defaultOutcome" on-save-answer-group-feedback="saveDefaultOutcomeFeedback(defaultOutcome)" on-save-answer-group-dest="saveDefaultOutcomeDest(defaultOutcome)" is-editable="editabilityService.isEditable()" class="protractor-test-response-body">
                  </answer-group-editor>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </md-card>

  <md-card style="margin: 20px 0px; padding: 0px;">
    <div ng-if="editabilityService.isEditableOutsideTutorialMode() && (getCurrentInteractionId() !== 'Continue')" class="oppia-add-rule-button-container">
      <button type="button" class="btn btn-default btn-lg oppia-add-response-button protractor-test-open-add-response-modal" ng-click="openAddAnswerGroupModal()">
        + Add New Oppia Response
      </button>
    </div>
  </md-card>
</div>

<script type="text/ng-template" id="modals/addAnswerGroup">
  <div class="modal-header protractor-test-add-response-modal-header">
    <h3>Add Response</h3>
  </div>

  <div class="modal-body">
    <form name="addAnswerGroupForm.outcomeDetailsForm" class="form-inline protractor-test-add-response-details">
      <div class="oppia-rule-details-header">
        <strong>If the learner's answer...</strong>
      </div>

      <rule-editor rule="tmpRule" is-editable="editabilityService.isEditable()" is-editing-rule-inline="false">
      </rule-editor>

      <br>

      <outcome-feedback-editor outcome="tmpOutcome">
      </outcome-feedback-editor>

      <br>

      <outcome-destination-editor outcome="tmpOutcome">
      </outcome-destination-editor>
    </form>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default protractor-test-close-add-response-modal" ng-click="cancel()">Cancel</button>
    <button class="btn btn-success protractor-test-add-new-response" ng-click="saveResponse(false)" ng-disabled="addAnswerGroupForm.outcomeDetailsForm.$invalid || isSelfLoopWithNoFeedback(tmpOutcome)">Save Response</button>
    <button class="btn btn-success protractor-test-add-new-response" ng-click="saveResponse(true)" ng-disabled="addAnswerGroupForm.outcomeDetailsForm.$invalid || isSelfLoopWithNoFeedback(tmpOutcome)">Save and Add Another</button>
  </div>
</script>

<script type="text/ng-template" id="modals/deleteAnswerGroup">
  <div class="modal-header">
    <h3>Delete Response</h3>
  </div>

  <div class="modal-body">
    <p>
      Are you sure you want to delete this response?
    </p>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
    <button class="btn btn-danger protractor-test-confirm-delete-response"
            ng-click="reallyDelete()">
      Delete Response
    </button>
  </div>
</script>
